<template>
	<view class="dl-wrapper">
		<!-- 搜索 -->
		<u-navbar :is-back="false" :height="uNavbarHeight">
			<view class="m_a pl_4 pr_4">
				<tabbar-search @click="onClick" :disabled="true"></tabbar-search>
			</view>
		</u-navbar>
		
		<!-- 轮播图 -->
		<view class="banner-box">
			<u-swiper 
			:list="bannerList"
			:border-radius="8"
			:interval="4800"
			name="pic"
			:effect3d="effect3D"
			>
			</u-swiper>
		</view>
		
		<!-- 推荐歌单 -->
		<view class="common-card p_4 scroll-x-box">
			<view class="m_b_25">
				<view class="title pt_1">推荐歌单<span class="title_1 ml_3">热门</span></view>
			</view>
			<view class="content">
				<scroll-view :scroll-x="true" class="scroll-X">
					<view class="poster-list-item" v-for="(item,index) in topPlaylist" :key="item.id" @click="goPlaylistPage(item)">
						<view class="image-box">
							<u-image width="200rpx" height="200rpx" border-radius="8" :src="item.coverImgUrl || item.picUrl"></u-image>
							<view class="dt-count">
								{{formatNumber(item.playCount)}}
							</view>
						</view>
						<view class="u-line-2 line-2" >{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 飙升榜 -->
		<view class="common-card p_4 scroll-x-box">
			<view class="m_b_25">
				<view class="title pt_1">音乐飙升榜<span class="title_1 ml_3">飙升</span></view>
			</view>
			<view class="content">
				<scroll-view :scroll-x="true" class="scroll-X">
					<view class="poster-list-item" v-for="(item,index) in soarList" :key="item.id" @tap="goPlayMusic(item)">
						<view class="image-box">
							<u-image width="200rpx" height="200rpx" border-radius="10" :src="item.al.picUrl"></u-image>
							<view class="dt-count">
								{{formatNumber(item.dt)}}
							</view>
						</view>
						<view class="song-name u-line-1">{{item.name}}</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
		
		
		<view @click="test">测试</view>
		<view>{{user}}</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航栏高度
				uNavbarHeight: 55,
				// 轮播图
				bannerList: [],
				// 轮播图是否为3d效果
				effect3D: true,
				// 推荐歌单 歌单 ( 网友精选碟 )
				topPlaylist: [],
				// 飙升榜
				soarList: [],
				// 用户数据
				user: [],
			}
		},
		created() {
			this.getBannerList();
			this.getInitList();
			console.log("123456789")
			console.log(this.$user)
			this.user = this.$user
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success:(res) => {
					this.user = res.data.profile
				}
			})
		},
		methods: {
			onClick() {
				uni.navigateTo({
					url: '/pages/searchPage/searchPage'
				});
			},
			getBannerList() {
				this.$api.banner({
					data:{
						type: 1
					}
				}).then(data=> {
					this.bannerList= data.banners;
				})
			},
			async getInitList() {
				
				// 所有榜单 获取id 然后传入/playlist/detail获取歌单详情
				let _top = await this.$api.toplist()
				let _list = _top.list
				console.log("_list",_list)
				
				// 推荐歌单：歌单( 网友精选碟 )  order: 可选值为 'new' 和 'hot', 分别对应最新和最热 , 默认为 'hot'personalized
				let _topPlaylist = await this.$api.topPlaylist({data:{limit: 8, order: 'hot'}});
				this.topPlaylist = _topPlaylist.playlists;
				
				// 推荐歌单
				// let _topPlaylist = await this.$api.personalized({data:{limit: 8}});
				// this.topPlaylist = _topPlaylist.result
				
				// 飙升榜 19723756
				let _soarList = await this.$api.playlistDetail({data:{id:_list[0].id}})
				this.soarList = _soarList.playlist.tracks.slice(0,8);
				console.log("飙升榜", this.soarList)
				
				
				
			},
			
			// 去到对应的歌单 待完善
			goPlaylistPage(item) {
				console.log("去到对应的歌单 待完善  点击的ID为："+id)
			},
			
			goPlayMusic(item){
				console.log("待完善，去到听音乐",item)
				let params = {
					id: item.id,
					name: item.name,
					picUrl : item.al ? item.al.picUrl : ''
				};
				this.playMusic(params);
			},
			
			// 测试接口
			async test(){
				let _userRecord = await this.$api.userRecord({data:{uid:1378818690, type:1 }})
				console.log(_userRecord)
			},
			
			
		}
	}
</script>

<style scoped>

.dl-wrapper{
	width: 100%;
	top: var(--status-bar-height);
	bottom: var(--window-bottom);
	padding-bottom: 50rpx;
	background-color: #f5f5f5;
}
.banner-box {
	padding: 30rpx 10rpx;
	background-color: #fff;
}

.common-card{
	background-color: #FFFFFF;
	margin-top: 30rpx;
}
.m_b_25{
	margin-bottom: 25rpx;
}
.common-card .title{
	font-size: 32rpx;
	font-weight: bolder;
}
.common-card .title_1{
	font-size: 20rpx;
	color: #808080;
	vertical-align: super;
}
.common-card .content{}

.line-2{
	height: 76rpx;
	white-space: pre-wrap;
	/* word-wrap: break-word; */
}


/* 横向滚动 */
.scroll-x-box{
}
.scroll-x-box .scroll-X{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.scroll-x-box .scroll-X .poster-list-item{
	width: 200rpx;
	display: inline-block;
	margin-right: 30rpx;
}
.scroll-x-box .scroll-X .poster-list-item .image-box{
	width: 200rpx;
	position: relative;
}
.scroll-x-box .scroll-X .poster-list-item .image-box .dt-count{
	position: absolute;
	top: 0;
	right: 0;
	color: #FFFFFF;
	background-color: rgba(0,0,0,.1);
	border-radius: 10rpx;
	padding: 0 5rpx;
	font-size: 26rpx;
}
.scroll-x-box .scroll-X .poster-list-item .song-name{
	height: auto;
	color: #333;
	margin-top: 8rpx;
	font-size: 26rpx;
	word-wrap : break-word ;
	word-break: normal;
}
</style>
